<template>
<view class="">
  <view class="navigator-box">
      
    </view>
    <!-- 顶部导航栏 -->
    <view class="tabbar-top">
    	<view class="tab-left">
    		<image @click="scancodes" src="../../static/saoyisao.png" mode=""></image>
    		<image src="../../static/search.png" mode=""></image>
    	</view>
    	<view class="">
    		首页
    	</view>
    	<view class="tab-right">
    		<image src="../../static/service.png" mode=""></image>
    		<image @click="message" src="../../static/message.png" mode=""></image>
    	</view>
    </view>
  	<view class="home-box">

  		<view class="api-text" @click="addapi">
  			<text>{{apitext}}</text>
  			<u-icon name="arrow-right"></u-icon>
  		</view>
  		<!-- 列表内容 -->
  		<view class="con-text">
  			<view class="con-list" @click="jiaoyi">
  				<image src="../../static/jiaoyi.png" mode=""></image>
  				<text>交易所开户</text>
  			</view>
  			<view class="con-list" @click="celueshop">
  				<image src="../../static/celue.png" mode=""></image>
  				<text>策略商城</text>
  			</view>
  			<view class="con-list" @click="celuegendan">
  				<image src="../../static/gendan.png" mode=""></image>
  				<text>策略跟单</text>
  			</view>
  			<view class="con-list" @click="addapi">
  				<image src="../../static/addapi.png" mode=""></image>
  				<text>添加API</text>
  			</view>
  			<view class="con-list" @click="activity">
  				<image src="../../static/huodong.png" mode=""></image>
  				<text>活动中心</text>
  			</view>
  			<view class="con-list" @click="friends">
  				<image src="../../static/yaoqing.png" mode=""></image>
  				<text>邀请好友</text>
  			</view>
  			<view class="con-list" @click="partner">
  				<image src="../../static/hehuoren.png" mode=""></image>
  				<text>合伙人</text>
  			</view>
  			<view class="con-list">
  				<image src="../../static/siyou.png" mode=""></image>
  				<text>私有部署</text>
  			</view>
  		</view>
  		<!-- 公告 -->
  		<view class="gonggao">
  			<view class="gonggao-left">
  				<u-icon color="#ffffff" name="volume-up"></u-icon>
  				<text>关于服务调正的公告</text>
  			</view>
  			<u-icon color="#ffffff" name="list"></u-icon>
  		</view>
  		<view class="advertisement">
  			<image src="../../static/bg2.png" mode=""></image>
  		</view>
      <!-- 策略精选 -->
  		<!-- 标题 -->
  		<view class="text-title">
  			<view class="white-color">
  				策略精选
  			</view>
  			<view class="title-right">
  				<text>更多</text>
  				<u-icon name="arrow-right"></u-icon>
  			</view>
  		</view>
  		<!-- 内容 -->
  		<view class="celue" @click="celueshopdetail">
  			<view class="celue-left">
  				<text class="celue-left-top">+345.04%</text>
  				<text>年化收益率</text>
  			</view>
  			<view class="celue-right">
  				<view class="celue-right-top">
  					<text>海风马丁追踪策略</text>
  					<view class="celue-ver">
  						v2nez5
  					</view>
  				</view>
  				<text>震荡反弹行情交易利器！</text>
  			</view>
  		</view>
          <!-- 策略精选 -->
          <!-- 排行榜 -->
          <!-- 标题 -->
          <view class="text-title">
          	<view class="white-color">
          		排行榜
          	</view>
          	<view class="title-right">
          		<text>更多</text>
          		<u-icon name="arrow-right"></u-icon>
          	</view>
          </view>
          <view class="sort">
            <view class="sort-list" @click="square">
              <image src="../../static/bg2.png" mode=""></image>
              <text>123434344343</text>
              <text class="sort-title">2344.34%</text>
            </view>
            <view class="sort-list" @click="square">
              <image src="../../static/bg2.png" mode=""></image>
              <text>123434344343</text>
              <text class="sort-title">2344.34%</text>
            </view>
            <view class="sort-list" @click="square">
              <image src="../../static/bg2.png" mode=""></image>
              <text>123434344343</text>
              <text  class="sort-title">2344.34%</text>
            </view>
          </view>
          <!-- 排行榜 -->
          <!-- 大V说量化 -->
          <!-- 标题 -->
          <view class="text-title">
          	<view class="white-color">
          		大V说量化
          	</view>
          	<view class="title-right">
          		<text>更多</text>
          		<u-icon name="arrow-right"></u-icon>
          	</view>
          </view>
          <view class="dav">
            3分钟带您了解Vtrading！
          </view>
          <!-- 大V说量化 -->
          <!-- 右下角 任务有奖 -->
          <view class="taskaward" @click="newbietask">
            <image src="../../static/bg2.png" mode=""></image>
          </view>
          <!-- 右下角 任务有奖 -->
  	</view>
</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				apitext: '现在录入api,免费体验量化策略交易'
			}
		},
		methods: {
      message(){
        uni.navigateTo({
          url:'../../subpkg/message/message'
        })
      },
      // 添加api
      addapi(){
         getApp().globalData.swiperCurrent=0
        uni.navigateTo({
          url:'../../subpkg/addapi/addapi'
        })
      },
      // 交易所开户
      jiaoyi(){
        getApp().globalData.swiperCurrent=1
        uni.navigateTo({
          url:'../../subpkg/addapi/addapi'
        })
      },
      // 策略商城
      celueshop(){
         getApp().globalData.swiperCurrent=1
        uni.switchTab({
          url:"../transaction/transaction"
        })
      },
      // 策略跟单
      celuegendan(){
        getApp().globalData.swiperCurrent=2
        uni.switchTab({
          url:"../transaction/transaction"
        })
      },
      // 活动中心
      activity(){
        uni.navigateTo({
          url:'../../subpkg/activity/activity'
        })
      },
      // 策略精选进入策略商城详情
      celueshopdetail(){
        uni.navigateTo({
          url:'../../subpkg/celueshop-detail/celueshop-detail'
        })
      },
      // 排行榜进入广场榜单
      square(){
        uni.switchTab({
          url:'../square/square'
        })
      },
      // 跳转到新手任务
      newbietask(){
        uni.navigateTo({
          url:'../../subpkg/newbietask/newbietask'
        })
      },
      // 合伙人
      partner(){
        uni.navigateTo({
          url:'../../subpkg/partner/partner'
        })
      },
      // 邀请好友
      friends(){
        uni.navigateTo({
          url:'../../subpkg/friends/friends'
        })
      },
      // --------------------------
      // 扫描二维码方法
      // 允许从相机和相册扫码
      scancodes(){
        // console.log('3243')  
        uni.scanCode({
            success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
            }
        });
      }

		}
	}
</script>

<style scoped>
	page {
		background-color: #0c0c0c;
		color: #FFFFFF;
	}
.navigator-box{
  position: fixed;
  top: 0rpx;
  height: 66rpx;
  width: 100%;
  background-color: #FFFFFF;
  color:"#FFFFFF";
  z-index: 999;
}
.home-box{
  padding: 0 40rpx;
}
	.tabbar-top {
    position: fixed;
    top: 66rpx;
		display: flex;
    width: 100%;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
    color: #FFFFFF;
    z-index: 999;
    background-color: #000000;
	}
.tab-left,.tab-right{
  margin-top: 20rpx;
}
	.tab-left image {
		width: 48rpx;
		height: 48rpx;
    margin-left: 40rpx;
	}

	.tab-right image {
		width: 48rpx;
		height: 48rpx;
    margin-right: 40rpx;
	}

	.api-text {
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #13192f;
		border-radius: 20rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
    margin: 160rpx 0 12rpx;
	}

	.con-text {
		display: flex;
		flex-wrap: wrap;
    color: #FFFFFF;
	}

	.con-list {
		display: flex;
		flex-direction: column;
		width: 25%;
		height: 100rpx;
		align-items: center;
		margin: 30rpx 0;
	}

	.con-list image {
		width: 50rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.gonggao {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		margin: 40rpx 20rpx;
    color: #FFFFFF;
	}

	.advertisement {
		height: 180rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.advertisement image {
		width: 100%;
		height: 100%;
	}

	.text-title {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
		font-size: 32rpx;
		height: 66rpx;
		line-height: 66rpx;
		padding: 0 10rpx;
	}

	.title-right {
		font-size: 24rpx;
    color: #414a54;
	}

	.celue {
		height: 160rpx;
		background-color: #16192a;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
    color: #6f7688;
	}
	.celue-left{
		display: flex;
		flex-direction: column;
		align-self: center;
		font-size: 28rpx;
		margin: 0 30rpx;
		width: 35%;
	}
	.celue-right{
		width: 65%;
		display: flex;
		flex-direction: column;
		align-self: center;
		padding: 0 40rpx;
	}
	.celue-right-top{
		display: flex;
		justify-content: space-between;
    color: #FFFFFF;
	}
	.celue-ver{
		font-size: 18rpx;
		background-color: #31364a;
		padding: 4rpx;
		border-radius: 10rpx;
	}
  .celue-left-top{
    font-size: 40rpx;
    color: red;
  }
  .sort{
    display: flex;
    flex: 1;
  }
  .sort-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-end;
    width: 33.33%;
    height: 220rpx;
    background-color: #131931;
    color: #FFFFFF;
    padding: 30rpx 0;
    margin: 10rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }
 .sort-list:nth-child(2){
    height: 250rpx;
  }
  .sort-list:nth-child(2) image{
    width: 80rpx;
    height: 80rpx;
    
  }
/*  .sort-list:nth-child(2)::before{
    content: url(../../static/c1.png);
    display: block;
    width: 30rpx;
    height: 30rpx;
  } */
  .img-top{
    width: 30rpx;
    height: 30rpx;
    margin-top: -50%;
  }
  .sort-list image{
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 20rpx;
  }
  .sort-title{
    color: red;
  }
  .dav{
    height: 100rpx;
    line-height: 100rpx;
    background-color: #131930;
    font-size: 30rpx;
    padding: 0 30rpx;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    color: #FFFFFF;
  }
  .taskaward{
    position: fixed;
    right: 30rpx;
    bottom: 140rpx;
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    
  }
  .taskaward image{
    width: 100%;
    height: 100%;
  }
  .white-color{
    color: #FFFFFF;
  }
</style>
